<!--
 * @Author: suo.tianbao suo.tianbao@vpclub.cn
 * @Date: 2023-09-01
 * @LastEditors: suo.tianbao suo.tianbao@vpclub.cn
 * @LastEditTime: 2023-09-01
 * @FilePath: /element-admin/src/views/GitUsers.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div id="Members-page">
    <!--顶部搜索栏-->
    <div class="col-md-12">
      <el-row :gutter="20">
        <el-col :span="22" :offset="1" class="clearfix">
          <el-form :inline="true" :model="query" class="demo-form-inline">
            <el-form-item label="关键词">
              <el-input v-model="query.key" placeholder="会员ID & 名称 & 手机号" size="small"
                        :clearable="true"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleFetch" class="register_btn" size="small">查询</el-button>
            </el-form-item>
            <el-form-item>
              <el-button class="register_btn" size="small" type="success" @click="handleAdd">添加</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </div>
    <!--中部数据表格栏-->
    <div class="col-md-12">
      <el-row :gutter="20">
        <el-col :span="22" :offset="1" class="clearfix">
          <el-table :data="memList"
                    :cell-style="{padding:'3px'}"
                    :row-style="{height:'30px'}"
                    :height="tableHeight" :key="isIndex" style="width: 100%" v-loading="isLoading" border stripe
                    row-key="id">
            <el-table-column v-if="isIndex == 1" type="index" label="序号" width="75" fixed></el-table-column>
            <el-table-column fixed prop="status" label="策略状态" width="90">
              <template v-slot="scope">
                <el-tag v-if="scope.row.status=='STR-001'" type="success">已启用</el-tag>
                <el-tag v-if="scope.row.status=='STR-002'" type="warning">已停用</el-tag>
                <el-tag v-if="scope.row.status=='STR-009'" type="info">已删除</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="策略名称"></el-table-column>
            <el-table-column prop="action_str" label="触发条件"></el-table-column>
            <el-table-column prop="reward_way_str" label="奖励方式"></el-table-column>
            <el-table-column prop="diff_url" label="触发url"></el-table-column>
            <el-table-column prop="create_date" label="创建时间" width="180"></el-table-column>
            <el-table-column label="操作" :width="optCulWidth">
              <template v-slot="scope">
                <el-button type="primary" plain size="mini" @click="openDraw(scope.row)">编辑</el-button>
                <el-button type="success" v-if="scope.row.status=='STR-002'" plain size="mini"
                           @click="handleAct(scope.row, 1)">启用
                </el-button>
                <el-button type="warning" v-if="scope.row.status=='STR-001'" plain size="mini"
                           @click="handleStop(scope.row)">禁用
                </el-button>
                <el-button type="success" v-if="scope.row.status=='STR-009'" plain size="mini"
                           @click="handleRes(scope.row)">恢复
                </el-button>
                <el-button type="danger" plain size="mini" @click="handleDel(scope.row)">删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
        <el-col :span="22" :offset="1" class="custRow clearfix">
          <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :pager-count=5
              :page-sizes="[20, 50, 100]"
              :page-size="query.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :page-count=10
              :total="query.total">
          </el-pagination>
        </el-col>
      </el-row>
    </div>
    <div>
      <el-drawer title="奖励策略详细" :visible.sync="isDrawerShow" :with-header="false" :size="drawerWidth">
        <MemberRewardStrategyDrawer :drawId="strId" @fMethod="closeDraw"></MemberRewardStrategyDrawer>
      </el-drawer>
    </div>
  </div>
</template>
<script>
import {mapMutations} from "vuex";
import {act, drop, fetch, res, stop} from "@/api/MemberRewardStrategy";
import MemberRewardStrategyDrawer from '@/views/members/MemberRewardStrategyDrawer/MemberRewardStrategyDrawer.vue'

export default {
  name: "MemberRewardStrategyView",
  components: {MemberRewardStrategyDrawer},
  data() {
    return {
      isIndex: 1,
      isShow: false,
      isLoading: true,
      currentPage: 1,
      total: 0,
      optCulWidth: 300,
      query: {
        key: '',
        pageSize: 20,
        pageNum: 1,
      },
      tableHeight: 650,
      memList: [],
      drawerWidth: "1240px",
      isDrawerShow: false,
      strId: '',
    }
  },
  computed: {},
  methods: {
    ...mapMutations(['add_tab']),
    handleFetch() {
      this.isLoading = true;
      fetch(this.query).then(res => {
        let _res = eval(res.data);
        // 刷新页面表格
        this.memList = _res.lists;
        // this.currentPage = _res.currentPage;
        this.query.pageSize = _res.pageSize;
        this.query.total = _res.total;
        this.isLoading = false;
      }).catch(err => {
        this.isLoading = false;
        this.$message.error('错了哦，这是一条错误消息' + err);
      });
    },
    handleAdd() {
      this.strId = '';
      this.isDrawerShow = true;
    },
    // 初始页currentPage、初始每页数据数pagesize和数据data
    handleSizeChange(size) {
      this.query.pageSize = size;
      this.handleFetch(this.query);
    },
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage;
      this.query.pageNum = currentPage;
      this.handleFetch(this.query);
    },
    handleDel(row) {
      let param = {"id": row.id,}
      drop(param).then(res => {
        if (res.code == 200) {
          this.handleFetch();
          this.$notify({title: '执行成功', message: '数据操作完成', type: 'success', offset: 100});
        }
      }).catch(err => {
        this.$notify({title: '执行失败', message: '数据操作异常' + err, type: 'error', offset: 100});
      });
    },
    handleAct(row) {
      let param = {"id": row.id,}
      act(param).then(res => {
        if (res.code == 200) {
          this.handleFetch();
          this.$notify({title: '执行成功', message: '数据操作完成', type: 'success', offset: 100});
        }
      }).catch(err => {
        this.$notify({title: '执行失败', message: '数据操作异常' + err, type: 'error', offset: 100});
      });
    },
    handleRes(row) {
      let param = {"id": row.id,}
      res(param).then(res => {
        if (res.code == 200) {
          this.handleFetch();
          this.$notify({title: '执行成功', message: '数据操作完成', type: 'success', offset: 100});
        }
      }).catch(err => {
        this.$notify({title: '执行失败', message: '数据操作异常' + err, type: 'error', offset: 100});
      });
    },
    handleStop(row) {
      let param = {"id": row.id,}
      stop(param).then(res => {
        if (res.code == 200) {
          this.handleFetch();
          this.$notify({title: '执行成功', message: '数据操作完成', type: 'success', offset: 100});
        }
      }).catch(err => {
        this.$notify({title: '执行失败', message: '数据操作异常' + err, type: 'error', offset: 100});
      });
    },
    openDraw(row) {
      if (row.id == undefined) {
        return;
      }
      this.strId = row.id;
      this.isDrawerShow = true;
    },
    closeDraw(r) {
      if (r) {
        this.handleFetch();
      }
      this.strId = 0;
      this.isDrawerShow = false;
    }
  },
  created() {
    this.handleFetch();
  },
  mounted() {
  },
}
</script>
<style scoped>

.custRow {
  display: flex;
  margin-top: 5px;
  padding: 5px 5px 5px 5px;
}
</style>